<template>
	<view class="content">
		<view class="content-search">
			<view class="search-top flex">
				<view class="title">地址</view>
				<input class="input flex-1" v-model="address" confirm-type="search" placeholder-style="color:#e1e1e1;" placeholder="请输入" readonly @click="goSearch" />
			</view>
			<view class="search-top flex">
				<view class="title">行程</view>
				<view class="yellow" v-if="tabsId==0">{{timeTabList[currentTime].val}}分钟以内</view>
				<view class="yellow" v-if="tabsId==1">0-{{distanceTabList[currentDistance].name}}</view>
			</view>
			<view class="tabBox flex">
				<view class="tab" :class="tabsId==0?'active':''" @click="tabsId=0,resetScroll()">时间</view>
				<view class="tab" :class="tabsId==1?'active':''" @click="tabsId=1,resetScroll()">距离</view>
			</view>
			<view class="stepsBox">
				<lsd-steps 
				:current="currentTime" 
				:list="timeTabList"
				activeColor="#FD9618"
				@change="changeTime"
				v-if="tabsId==0"
				></lsd-steps>
				<lsd-steps
				:current="currentDistance" 
				:list="distanceTabList"
				activeColor="#FD9618"
				@change="changeDistance"
				v-if="tabsId==1"
				></lsd-steps>
				<!-- <u-steps :current="currentTime" dot activeColor="#FD9618" inactiveColor="#c1c1c1" v-if="tabsId==0">
					<u-steps-item v-for="(item,i) in timeTabList" :key="i" :title="item.val" @click="currentTime=i,resetScroll()"></u-steps-item>
				</u-steps>
				<u-steps :current="currentDistance" dot activeColor="#FD9618" inactiveColor="#c1c1c1" v-if="tabsId==1">
					<u-steps-item v-for="(item,i) in distanceTabList" :key="i" :title="item.val" @click="currentDistance=i,resetScroll()"></u-steps-item>
				</u-steps> -->
			</view>
			<view class="search-box flex center" v-if="tabsId==0">
				<view class="list flex-1">
					<view class="itemIcon" v-if="fandoffId!='walking'" @click="fandoff('walking')">
						<image class="img" :src="$imgUrl + '/icon/buxing.png'"></image>
					</view>
					<view class="itemFandoff" v-if="fandoffId=='walking'">
						步行
					</view>
				</view>
				<view class="list flex-1">
					<view class="itemIcon" v-if="fandoffId!='riding'" @click="fandoff('riding')">
						<image class="img" :src="$imgUrl + '/icon/qixing.png'"></image>
					</view>
					<view class="itemFandoff" v-if="fandoffId=='riding'">
						骑行
					</view>
				</view>
				<view class="list flex-1">
					<view class="itemIcon" v-if="fandoffId!='driving'" @click="fandoff('driving')">
						<image class="img" :src="$imgUrl + '/icon/car.png'"></image>
					</view>
					<view class="itemFandoff" v-if="fandoffId=='driving'">
						打车
					</view>
				</view>
				<view class="list flex-1">
					<view class="itemIcon" v-if="fandoffId!='transit'" @click="fandoff('transit')">
						<image class="img" :src="$imgUrl + '/icon/gongjiao.png'"></image>
					</view>
					<view class="itemFandoff" v-if="fandoffId=='transit'">
						公交
					</view>
				</view>
			</view>
		</view>
		<view class="content-nav">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="nav-tabs">
				<u-tabs :activeStyle="{color:'#FD9618'}" lineColor="#FD9618" :list="navList" @click="navClick"></u-tabs>
			</view>
			<view class="nav-content">
				<view class="nav-item flex" v-for="(item,i) in roomsList" :key="i" @click="goDetail(item)">
					<view class="nav-left">
						<image class="img" v-if="item.picUrl" :src="item.picUrl"></image>
						<image class="img" v-else :src="$imgUrl + '/index/entrust1.png'"></image>
					</view>
					<view class="nav-right">
						<view class="nav-top line1">{{item.name}}</view>
						<view class="nav-location line1">
							<image class="icon" :src="$imgUrl + '/icon/addr.png'" mode=""></image>
							{{item.address}}
						</view>
						<view class="nav-location">
							<image class="icon" :src="$imgUrl + '/icon/phone.png'" mode=""></image>
							{{item.storeTel}}
						</view>
						<view class="nav-bottom flex">
							<view class="left" v-if="tabsId==0">
								<text class="yellow">{{item.time}}</text>分钟
							</view>
							<view class="left" v-if="tabsId==1">
								距离<text class="yellow">{{item.distance > 1000 ? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}} </text>
							</view>
							<view class="right">
								<text class="yellow">{{item.monthRental}}</text>/月起
							</view>
						</view>
					</view>
				</view>
			</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { commutingtimefindroom,commutingdistancefindroom,latLonToAddress } from '@/common/API/room'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)

const winH = ref()
const scrollH = ref()
const roomsList = ref<any>([])
const currentTime = ref(0)
const timeTabList = ref([
	{ val: '15', name:'15' },
	{ val: '30', name:'30' },
	{ val: '45', name:'45' },
	{ val: '60', name:'60' },
	{ val: '75', name:'75' },
	{ val: '90', name:'90' },
])
const currentDistance = ref(0)
const distanceTabList = ref([
	{ name: '1km', val: '1000' },
	{ name: '3km', val: '3000' },
	{ name: '5km', val: '5000' },
	{ name: '10km', val: '10000' },
	{ name: '20km', val: '20000' },
	{ name: '30km', val: '30000' },
])
const fandoffId = ref('walking')
const tabsId = ref(0)  //0时间 1距离
const navList = ref([{
	name: '公寓',
	val: 1
}, {
	name: '合租',
	val: 2
}])
const viewMode = ref(1) //查看模式 1：公寓 2：（合租）房源
const address = ref()
const detailAddress = ref()
const lat = ref()
const lng = ref()
onLoad((options)=> {
	winH.value = uni.getWindowInfo().windowHeight + "px";
	scrollH.value = (uni.getWindowInfo().windowHeight - 88) + "px";
	if(options.search){
		address.value = options.search
		detailAddress.value = options.address
		lat.value = options.lat
		lng.value = options.lng
	}else{
		getLoaction()
	}
})

const getLoaction = () => {
	uni.getLocation({
		type: 'gcj02',
		isHighAccuracy: true,
		success: async (res) => {
			if(res.latitude&&res.longitude){
				let addr = await latLonToAddress({
					latLon: `${res.latitude},${res.longitude}`
				})
				address.value = addr.formatted_address
				lat.value = res.latitude
				lng.value = res.longitude
				resetScroll()
			}
		}
	})
}

const fandoff = (index)=> {
	fandoffId.value = index
	resetScroll()
}

const navClick = (item)=> {
	viewMode.value = item.index+1
	resetScroll()
}

/*上拉加载的回调*/
const upCallback = async (mescroll)=>{
	if(!address.value){
		mescroll.endSuccess(0);
		return false
	}
	let data = {
		address: detailAddress.value?detailAddress.value:address.value,
		lat: lat.value,
		lng: lng.value,
		pageSize: mescroll.size,
		pageNum: mescroll.num,
		viewMode: viewMode.value
	}
	let res = {}
	if(tabsId.value==0){
		// 时间找房
		data.minute = timeTabList.value[currentTime.value].val
		data.mode = fandoffId.value
		res = await commutingtimefindroom(data)
	}else{
		// 距离找房
		data.distance = distanceTabList.value[currentDistance.value].val
		res = await commutingdistancefindroom(data)
	}
	let curPageData = res.list;
	let curPageLen = curPageData.length;
	if(mescroll.num == 1) roomsList.value = [];
	roomsList.value = roomsList.value.concat(curPageData);
	mescroll.endSuccess(curPageLen);
}

const resetScroll = ()=>{
	roomsList.value = [];
	downCallback()
}

const goDetail = (item)=>{
	if(viewMode.value==1){
		uni.navigateTo({
			url: `/pages/searchRoom/roomDetail?roomId=${item.id}`,
		})
	}else{
		uni.navigateTo({
			url: `/pages/searchRoom/disperseHouseDetail?roomHouseId=${item.id}`,
		})
	}
	
}

const changeTime = (e)=>{
	currentTime.value=e
	resetScroll()
}
const changeDistance = (e)=>{
	currentDistance.value=e
	resetScroll()
}
const goSearch = ()=>{
	uni.redirectTo({
		url: `commutingSearchPage?search=${address.value || ''}`
	})
}
</script>

<style lang="scss" scoped>
	.content {
		padding: 28rpx 0 0;
		background: #fff;
		.content-search {
			width: 686rpx;
			box-shadow: 0px 40px 80px  rgba(0, 0, 0, 0.05);
			padding: 16rpx 32rpx 40rpx;
			margin: 0 auto;
			.search-top {
				margin: 0 0 10rpx;
				.title {
					width: 84rpx;
					height: 64rpx;
					line-height: 64rpx;
					font-size: 26rpx;
					color: #999;
				}
				.input{
					background: rgb(245, 245, 245,0.8);
					height: 64rpx;
					line-height: 64rpx;
					font-size: 26rpx;
					border-radius: 8rpx;
					padding: 0 32rpx;
				}
				.yellow {
					flex: 1;
					line-height: 64rpx;
					font-size: 26rpx;
				}
			}
			.tabBox{
				margin: 0 0 20rpx;
				.tab{
					font-size: 26rpx;
					color: #999;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 18rpx;
					margin-right: 20rpx;
					&.active{
						background: $uni-color-primary;
						color: #fff;
						border-radius: 8rpx;
					}
				}
			}
			.search-box {
				.list{
					text-align: center;
					padding: 30rpx 0 0;
				}
				.itemIcon{
					width: 48rpx;
					height: 48rpx;
					margin: 0 auto;
				}
				.itemFandoff {
					margin: 0 auto;
					width: 104rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: $uni-color-primary;
					color: #fff;
					text-align: center;
					border-radius: 12rpx;
				}
			}
		}

		.content-nav {
			margin: 10rpx auto 0;
			width: 686rpx;
			.nav-content {
				.nav-item {
					padding: 34rpx 0;
					border-bottom: 2rpx #E5E5E5 solid;
					.nav-left {
						width: 242rpx;
						height: 184rpx;
						margin-right: 30rpx;
						border-radius: 8rpx;
						overflow: hidden;
					}
					.nav-right {
						width: 410rpx;
						.nav-top {
							font-size: 30rpx;
							font-weight: 500;
							line-height: 36rpx;
							margin: 0 0 16rpx;
						}
						.nav-location {
							font-size: 24rpx;
							line-height: 28rpx;
							margin: 0 0 12rpx;
							color: #999;
							.icon{
								width: 28rpx;
								height: 28rpx;
								vertical-align: middle;
								margin: -6rpx 0 0;
							}
						}
						.nav-bottom {
							justify-content: space-between;
							padding-top: 6rpx;
							.left,.right {
								font-size: 24rpx;
								line-height: 40rpx;
							}
							.yellow{
								color: $uni-color-primary;
								font-weight: 700;
								font-size: 36rpx;
							}
						}
					}

				}
			}
		}
	}
</style>